<!DOCTYPE html>
<html>
<head>
  <title>百度移动账号管理</title>
  <#include "/header.html">
  <link
      href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
      rel="stylesheet"/>
</head>
<body>


<div id="rrapp" v-cloak class="container-div ui-layout-center">
  <div v-show="showList">
    <!--<span id="directory" class="switch-on"></span>-->
    <div class="grid-btn">
      <div class="form-group col-sm-2">
        <input type="text" class="form-control" v-model="q.method" @keyup.enter="query" placeholder="日志描述">
      </div>
      <div class="form-group col-sm-2">
        <input type="text" class="form-control" v-model="q.args" @keyup.enter="query" placeholder="请求参数">
      </div>
      <a class="btn btn-default" @click="query">查询</a>
    </div>
    <div class="col-sm-12 select-info table-striped">
      <table id="bootstrap-table" data-mobile-responsive="true"></table>
    </div>
  </div>
</div>


<script src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>
<script>
  $(document)
  .ready(
      function () {
        $('#bootstrap-table').bootstrapTable({
          method: 'post', // 服务器数据的请求方式 get or post
          contentType: "application/json",
          url: baseURL + 'sysLog/findLogInfoPage', // 服务器数据的加载地址
          showRefresh: true,
          showToggle: true,
          showColumns: true,
          //showExport :true,
          sortable: true,
          sortName: "id",// 排序列名称
          sortOrder: "desc",
          iconSize: 'outline',
          toolbar: '#exampleToolbar',
          striped: true, // 设置为true会有隔行变色效果
          dataType: "json", // 服务器返回的数据类型
          pagination: true, // 设置为true会在底部显示分页条
          // queryParamsType : "limit",
          // //设置为limit则会发送符合RESTFull格式的参数
          singleSelect: false, // 设置为true将禁止多选
          // contentType : "application/x-www-form-urlencoded",
          // //发送到服务器的数据编码类型
          pageSize: 10, // 如果设置了分页，每页数据条数
          pageNumber: 1, // 如果设置了分布，首页页码
          pageList: [10, 20, 50, 100, 150],  //可供选择的每页的行数（*）
          // search : true, // 是否显示搜索框
          //showColumns : false, // 是否显示内容下拉框（选择显示的列）
          sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者// "server"
          queryParams: function (params) {
            return {
              "page": {
                "pageSize": params.limit,
                "pageIndex": (params.offset / params.limit) + 1
              },
              "body": {
                "method": vm.q.method,
              }
            };
          },
          responseHandler: function (res) {
            //返回格式化好的json数据
            res.total = res.body.total;
            res.rows = res.body.records;
            return res;
          },
          onLoadSuccess: function () {               //加载成功时执行
            //alert("success");
            console.info("加载成功");
          }
          , //加载成功时执行的方法
          onLoadError: function () {                 //加载失败时执行
            //alert("error");
            console.info("加载数据失败");
          }
          , //加载失败时执行的方法
          columns: [
            {
              checkbox: true
            },
            /*{
              field: 'id',
              align: 'center',
              title: '操作ID'
            },*/
            {
              field: 'username',
              align: 'center',
              title: '操作人'
            },
            {
              field: 'depict', // 列字段名
              align: 'center',
              title: '操作信息',// 列标题
            },
            {
              field: 'executeTime',
              align: 'center',
              title: '执行耗时'
            },
            {
              field: 'method',
              align: 'center',
              title: '执行方法'
            },
            {
              field: 'args',
              align: 'center',
              title: '请求参数',
              width: 430,
            },
            {
              field: 'clientIp',
              align: 'center',
              title: '操作IP'
            },
            {
              field: 'createTime',
              align: 'center',
              title: '操作时间'
            },
            {
              title: '操作',
              field: 'id',
              width: 430,
              align: 'center',
              formatter: function (value, row, index) {
                var e = '<a class="btn btn-success btn-sm '
                    + ''
                    + '" href="#" title="操作"  mce_href="#" onclick="showMethod(\''
                    + row.id
                    + '\',\'' + row.method + '\')"><i class="fa fa-magic" style="margin-right: 5px"></i>显示方法</a> ';
                var h = '<a class="btn btn-success btn-sm '
                    + ''
                    + '" href="#" title="操作"  mce_href="#" onclick="showArgs(\''
                    + row.id
                    + '\',\'' + row.args + '\')"><i class="fa fa-magic" style="margin-right: 5px"></i>显示参数</a> ';
                return e + h;
              }
            }]
        });
      });
  var vm = new Vue({
    el: '#rrapp',
    data: {
      q: {
        method: ''
      },
      showList: true,
      title: null,
      roleList: {},
      user: {
        method: ''
      }
    },
    methods: {
      query: function () {
        vm.reload();
      },
      getUser: function (id) {
        $.ajax({
          type: "POST",
          url: baseURL + "baiduMobileAccount/findBaiduMobileAccountInfoById",
          contentType: "application/json",
          data: JSON.stringify({id: id}),
          success: function (r) {
            if (r.code === 0) {
              var data = r.result;
              vm.user.username = data.username;
              vm.user.password = data.password;
              vm.user.apiKey = data.apiKey;
              vm.user.secretKey = data.secretKey;
              vm.user.id = data.id;
            } else {
              alert(r.msg);
            }
          }
        });
      },
      reload: function () {
        vm.showList = true;
        var opt = {
          url: baseURL + 'sysLog/findLogInfoPage',
          contentType: "application/json",
          silent: true,
          query: {
            "page": {
              "pageSize": 10,
              "pageIndex": 1
            },
            "body": {
              "method": vm.q.method,
              "args": vm.q.args
            }
          }
        };
        $('#bootstrap-table').bootstrapTable('refresh', opt);
      }
    }
  });

  function showMethod(id, method) {
    if (1 == 1) {
      alert(method);
      return;
    }
    $.ajax({
      type: "POST",
      url: baseURL + "baiduMobile/makeAccessToken",
      contentType: "application/json",
      data: JSON.stringify({accountId: id}),
      success: function (r) {
        if (r.code == 0) {
          alert('百度移动统计平台的token的更新成功', function () {
          });
        } else {
          alert(r.msg);
        }
      }
    });
  }

  function showArgs(id, args) {
    alert(args);
  }

</script>


</body>
</html>